<script setup lang="ts">
import { onMounted, ref } from 'vue'

const code = ref('')

const codeList = ref<string[]>([])

const isCounting = ref(false)
const countDownNum = ref(5)

function onSendVerifyCode() {
    if (isCounting.value)
        return

    handleCountDown()
}

/**
 * 倒计时函数
 * @remarks
 *
 * 当 countDownNum.value 大于 0 时，每秒将 countDownNum.value 减 1，并递归调用自身进行倒计时
 * 当 countDownNum.value 等于 0 时，将 isCounting.value 设置为 false，表示倒计时结束
 */
async function handleCountDown() {
    if (countDownNum.value > 0) {
        isCounting.value = true
        await wait(1000)
        countDownNum.value--
        handleCountDown()
    }
    else {
        countDownNum.value = 5
        isCounting.value = false
    }
}

/**
 * 输入事件处理函数
 *
 * @param e 输入事件对象
 */
function onInput(e: Event) {
    codeList.value = (e.target as HTMLInputElement).value.split('')
    if (codeList.value.length === 6)
        handleCountDown()
}

onMounted(() => {
})
</script>

<template>
    <NavbarContainer>
        <view class="box-border px-40rpx text-center">
            <view class="mt-200rpx text-x2l">
                请输入短信验证码验证您的手机号
            </view>
            <view class="mt-30rpx text-lg text-lightgray">
                我们已发送到
            </view>
            <view class="mt-30rpx text-lg text-lightgray">
                +86
            </view>
            <view class="relative mt-100rpx">
                <input v-model="code" class="absolute z-100 w-200% opacity-0 -left-full" type="number" maxlength="6"
                       focus="true" @input="onInput">
                <view class="flex justify-evenly">
                    <view
                        class="h-90rpx w-90rpx flex items-center justify-center border-1 border-lightgray rounded-sm border-solid text-64rpx color-green">
                        {{ codeList[0] }}
                    </view>
                    <view
                        class="h-90rpx w-90rpx flex items-center justify-center border-1 border-lightgray rounded-sm border-solid text-64rpx color-green">
                        {{ codeList[1] }}
                    </view>
                    <view
                        class="h-90rpx w-90rpx flex items-center justify-center border-1 border-lightgray rounded-sm border-solid text-64rpx color-green">
                        {{ codeList[2] }}
                    </view>
                    <view
                        class="h-90rpx w-90rpx flex items-center justify-center border-1 border-lightgray rounded-sm border-solid text-64rpx color-green">
                        {{ codeList[3] }}
                    </view>
                    <view
                        class="h-90rpx w-90rpx flex items-center justify-center border-1 border-lightgray rounded-sm border-solid text-64rpx color-green">
                        {{ codeList[4] }}
                    </view>
                    <view
                        class="h-90rpx w-90rpx flex items-center justify-center border-1 border-lightgray rounded-sm border-solid text-64rpx color-green">
                        {{ codeList[5] }}
                    </view>
                </view>
            </view>
            <view v-if="isCounting" class="mt-80rpx text-lightgray">
                {{ countDownNum }} 秒后重新发送
            </view>
            <view v-else class="mt-80rpx text-green" @click="onSendVerifyCode">
                重新发送
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped></style>

<route lang="json">
{
    "style": {
        "navigationBarTitleText": "输入验证码"
    }
}
</route>
